<template>
	<div class="TenantOrder shortorder list4list list4">
		<div class="TenantOrder-title">
			<div class="title-box">
				<span class="short-title " :class="{titleactive: isshortactive}" @click="shortlong($event)">日租</span>
				<span class="long-title" :class="{titleactive: islongactive}" @click="shortlong($event)">长租</span>
			</div>
		</div>

		<div v-if="isshortactive" class="TenantOrder-content short-content">

			<!--<order-navs></order-navs>-->
			<div class="short-item-box">
				<collect-viewt :data="collectlistdata" @collectlist="collectlist" ref="collectshort"></collect-viewt>
			</div>

		</div>

		<div v-if="islongactive" class="TenantOrder-content short-content">
			<div class="short-item-box">
				<collect-viewl :data="collectlistdata" @collectlist="collectlist" ref="collectlong"></collect-viewl>
			</div>

		</div>

	</div>

</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import CollectViewt from "./CollectViewt";
	import CollectViewl from "./CollectViewl";
	import eventBus from "../assets/libs/eventBus.js";
	export default {
		name: "CollectionList",
		data() {
			return {
				shortorder: true,
				longorder: false,
				isshortactive: true,
				islongactive: false,
				userId: "",
				token: "",
				page: 1,
				source: "web",
				collectlistdata: [],
				pageSize: '',
				houseType: 2,
				isFirstEnter: false // 是否第一次进入，默认false
			}
		},
		beforeRouteEnter(to, from, next) {
			if(from.name == 'shortDetails' || from.name == 'longDetails') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			var that = this;
			if((!that.$route.meta.isBack) || that.isFirstEnter) {
				var that = this;
				that.shortorder = true;
				that.longorder = false;
				that.isshortactive = true;
				that.islongactive = false;
				that.userId = ""
				that.token = "";
				that.page = 1;
				that.source = "web";
				that.collectlistdata = [];
				that.pageSize = '';
				that.houseType = 2;
				that.isFirstEnter = false; // 是否第一次进入，默认false
				if(sessionStorage.getItem("userinfo") != null) {
					let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
					that.userId = getHiss.id;
					that.token = getHiss.token;
						that.collectlist(that.page);
				} else {
					that.$router.push({
						path: "/login"
					})
				}
			} 
			
			// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
			that.$route.meta.isBack = false;
			// 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
			that.isFirstEnter = false;

		},
		created() {
			var that = this;
			that.isFirstEnter = true;
		},
		mounted() {
		},
		methods: {
			...mapActions({
				getIsCollect:'getIsCollect'
			}),
			shortlong(event) {
				var that = this;
				if(event.currentTarget.innerText == "日租") {

					that.isshortactive = true;
					that.islongactive = false;
					that.houseType = 2;
					that.collectlistdata = [];
					that.collectlist(that.page);
				}
				if(event.currentTarget.innerText == "长租") {
					that.isshortactive = false;
					that.islongactive = true;
					that.houseType = 1;
					that.collectlistdata = [];
					that.collectlist(that.page);
				}

			},
			collectlist(page) {
				let that = this;
				var ajaxSign = {
					"userId": that.userId.toString(),
					"token": that.token,
					"source": that.source,
					"houseType": that.houseType.toString(),
					"page": page.toString(),
				};
				
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetCollectList(ajaxData)
				.then(res => {
					if(res.sta == 203) {
						that.$router.push({
							path: "/login"
						})
					}
					let ajaxdata = res.result;
					
						that.getIsCollect(true);
					that.collectlistdata = that.collectlistdata.concat(ajaxdata);
					that.pageSize = ajaxdata.length;
					if(that.houseType == 1) {
						if((that.pageSize % 10) != 0 || that.pageSize == 0) {
							that.$refs.collectlong.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
							return;
						} else {
							that.$refs.collectlong.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
						}
					} else {
						if((that.pageSize % 10) != 0 || that.pageSize == 0) {
							that.$refs.collectshort.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
							return;
						} else {
							that.$refs.collectshort.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
						}
					}

				})
			}

		},
		components: {
			CollectViewt,
			CollectViewl
		}
	}
</script>

<style scoped>
	.TenantOrder {
		width: 100%;
		color: #282828;
		font-size: .35rem;
	}
	
	.TenantOrder .TenantOrder-title {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #eeecec;
	}
	
	.TenantOrder .title-box {
		width: 100%;
		border: 1px solid #eeecec;
		border-left: none;
		border-right: none;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}
	
	.TenantOrder .TenantOrder-title span {
		display: block;
		width: 50%;
		text-align: center;
		height: .69rem;
		line-height: .69rem;
		background: #fff;
		padding: 0 .37rem;
		box-sizing: border-box;
	}
	
	.TenantOrder .TenantOrder-title .titleactive {
		color: #fff;
		background: #e25051;
	}
	
	.TenantOrder .TenantOrder-content {
		width: 100%;
	}
	/*日租列表*/
	/*长租导航*/
	
	.TenantOrder .long-navul {
		width: 100%;
		display: flex;
	}
	
	.TenantOrder .long-navitem {
		width: 33.3333%;
		text-align: center;
		line-height: .69rem;
		background: #fff;
	}
	/*房屋列表*/
	
	.TenantOrder .shortorder .yd-list-loading>div {
		display: block !important;
	}
</style>